<template>
	<view class="page" v-if="detail">
        <view class="info">
            <text class="info__title">{{detail.name}}</text>
            <text class="info__type">{{detail.type_str}}</text>
            <view class="info__main">
                <view class="icon">
                    <text class="icon__size" v-if="detail.production_size > 1">{{detail.production_size}}</text>
                    <image class="icon__img" :src="detail.icon ? `/static/icon/${detail.icon}` : '/static/icon/empty.png'" mode="aspectFit"></image>
                </view>
                <view class="flex__column">
                    <text class="info__describe">{{detail.describe}}</text>
                    <text class="info__label">制造于<text class="info__txt">{{resMake | detail.production_building_id}}</text></text>
                    <text class="info__label">手动制造<text class="info__txt" v-if="detail.is_manual_operation">合成面板</text></text>
                </view>
            </view>
        </view>
	</view>
</template>

<script>
    import { materials, subassembly, facility } from '@/common/data.js';
	export default {
		data() {
			return {
				detail: null
			}
		},
        onLoad() {
            this.detail = uni.getStorageSync('itemDetail') || null;
            uni.setNavigationBarTitle({
                title: this.detail.name
            });
        },
        filters: {
            resMake(val){
                return facility.some(n => n.id === val)
            }
        },
		methods: {
			
		}
	}
</script>

<style lang="scss">
    .page{
    }
    
    .info{
        display: flex;
        flex-direction: column;
        padding: 15px 12px;
        line-height: 1.5;
        background-color: #1e2631;
        
        &__title{
            color: #fff19c;
            font-weight: bold;
            font-size: 16px;
        }
        
        &__type{
            color: #ccc;
        }
        
        &__describe{
            color: #fff;
        }
        
        &__main{
            padding: 10px;
            display: flex;
        }
        
        .icon{
            flex: none;
            height: 88px;
            width: 88px;
        }
    }
    
</style>
